<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    dialogWidth="1200px"
  >
    <template #searchPanel>
      <search-panel v-slot="{ form }" @search="search" @insert="addHandle" showAddButton :addPer="authConfig.add" :selectPer="authConfig.query">
        <job-shop v-model="form.storeId" placeholder="所属门店" />
        <el-select clearable v-model="form.storyType" style="width: 150px" placeholder="故事类型">
          <el-option v-for="item in dict['故事类型']" :key="item.index" :value="item.value" :label="item.text" />
        </el-select>
        <!-- <el-input   v-model="form.title" clearable placeholder="故事标题" style="width: 200px"/> -->
      </search-panel>
    </template>

    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{row}">
          <i class="el-icon-edit pointer" title="编辑" v-permission="authConfig.edit" @click="handleDataChange(row, '编辑故事宣传')"></i>
          <i class="el-icon-delete pointer ml-20" title="删除" v-permission="authConfig.del" @click="handleDataDelete(row)"></i>
        </template>
      </data-table>
      <!--工具条-->

    </template>
    <template #dialog>
      <dialog-data-form :edit-data="dialogData" @operate="handleDataOperate"/>
    </template>
  </base-layout>
</template>

<script>
  import {
    pageList,
    save,
    update,
    deleteById,
    detailById
  } from '@/api/pre-sale/advertManagement/story'
  import baseMixin from '@/mixins/base'
  import DialogDataForm from './components/DialogDataForm.vue'
  import { parseTimeToYMDHMS, getDict } from '@/utils'

  const dict = getDict(['故事类型'])
  const typeObjMap = {}

  dict['故事类型'].map(item => {
    typeObjMap[item.value] = item.text
  })

  export default {
    components: {
      DialogDataForm
    },
    mixins: [
      baseMixin({
        findData: pageList,
        addData: save,
        deleteData: deleteById,
        dataName: ['content', 'totalRecords'],
        findDataById: detailById,
        updateData: update,
        idName: 'id',
        format(res) {
          return res.map(data => {
            data.createTime = data.createTime ? parseTimeToYMDHMS(data.createTime) : ''
            data.typeLabel = typeObjMap[data.storyType]
            return data
          })
        }
      })
    ],
    data() {
      this.authConfig = {
        query: 'sh:advertising:sgxc:page',
        add: 'sh:advertising:sgxc:create',
        edit: 'sh:advertising:sgxc:update',
        del: 'sh:advertising:sgxc:deleted'
      }

      return {
        dialogVisible: false,
        dialogTitle: '新增故事宣传',
        tableColumnAttributes: [
          { name: '故事类型', value: 'typeLabel', type: 'text' },
          { name: '品牌', value: 'carBrandName', type: 'text' },
          { name: '车系', value: 'styleName', type: 'text' },
          { name: '门店', value: 'storeName', type: 'text' },
          { name: '创建人', value: 'createUser', type: 'text' },
          { name: '创建时间', value: 'createTime', type: 'text' }
        ]
      }
    },
    async created() {
      this.dict = dict
    },
    methods: {
      addHandle() {
        this.dialogVisible = true
        this.dialogData = null
        this.dialogTitle = '新增故事宣传'
      },
      dialogClose() {
        this.dialogVisible = false
      },
      search(form) {
        this.searchOptions = {
          // title: form.title,
          storeId: form.storeId,
          storyType: form.storyType
        }
        this.currentPage = 1
        this.setTableData()
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
